/**
 * @description 地图编辑器
 * @author mirahs
 * @email 2892727493@qq.com
 */
import AppConstants from "../../framework/scripts/AppConstants"
import PanelBase from "../../framework/scripts/view/PanelBase"
import Tip from "../core/Tip"
import MapData from "../map/MapData"
import HtmlUtil from "../util/HtmlUtil"


export default class PanelMapOpen extends PanelBase {
    public bundleName: string = 'null'
    public skinPath: string = '_panels/PanelMapOpen'
    public panelMaskStyle: number = AppConstants.panelMaskStyle.NoThrough | AppConstants.panelMaskStyle.Black

    private fileMapInput: HTMLInputElement
    private fileMap: File

    private fileDataInput: HTMLInputElement
    private fileData: File

    private lblMapFile: cc.Label
    private lblDataFile: cc.Label


    protected onInitDone(): void {
        this.fileMapInput = HtmlUtil.getInputFile('mapEditor-file_open_map', 'image/jpeg,image/jpg,image/png')
        this.fileMapInput.onchange = () => {
            const files = this.fileMapInput.files
            if (!files || files.length <= 0) return

            this.fileMap = files[0]
            this.lblMapFile.string = this.fileMap.name
        }

        this.lblMapFile = this.skin.getChildByName('spriteMapFile').getChildByName('lblMapFile').getComponent(cc.Label)

        this.fileDataInput = HtmlUtil.getInputFile('mapEditor-file_open_data', '.json')
        this.fileDataInput.onchange = () => {
            const files = this.fileDataInput.files
            if (!files || files.length <= 0) return

            this.fileData = files[0]
            this.lblDataFile.string = this.fileData.name
        }

        this.lblDataFile = this.skin.getChildByName('spriteDataFile').getChildByName('lblDataFile').getComponent(cc.Label)
    }

    protected onButtonClick(button: cc.Node): void {
        if (button.name == 'BtnOpenFile') {
            this.fileMapInput.click()
        } else if (button.name == 'BtnOpenData') {
            this.fileDataInput.click()
        } else if (button.name == 'BtnCancel') {
            this.close()
        } else if (button.name == 'BtnConfirm') {
            this.onClickBtnConfirm()
        }
    }

    protected onDestroy(): void {
        this.fileMapInput.onchange = null
        this.fileMapInput.value = ''

        this.fileDataInput.onchange = null
        this.fileDataInput.value = ''
    }


    private onClickBtnConfirm() {
        if (!this.fileMap || !this.fileData) {
            Tip.show('请选择地图和数据文件')
            return
        }

        const reader = new FileReader()
        reader.onload = () => {
            const image = new Image()
            image.src = reader.result as string
            image.onload = () => {
                const reader2 = new FileReader()
                reader2.onload = () => {
                    const mapData: MapData = JSON.parse(reader2.result as string)
                    if (image.width != mapData.width || image.height != mapData.height) {
                        cc.error('地图 ' + this.fileMap.name + ' 的宽高和地图文件 ' + this.fileData.name + ' 的宽度不一致')
                        return
                    }
                    const texture2D = new cc.Texture2D()
                    texture2D.initWithElement(image)

                    this._args[0](this.fileMap.name, texture2D, this.fileData.name, mapData)

                    this.close()
                }
                reader2.readAsText(this.fileData)
            }
        }
        reader.readAsDataURL(this.fileMap)
    }
}
